import Image from "next/image";

import { CreateOrganization } from "@clerk/nextjs";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

/**
 * @components 应用程序为空组件
 */

export const EmptyOrg = () => {
  return (
    <div className="flex flex-col h-full justify-center items-center">
      <Image priority src="/9009.png" alt="9009" width={200} height={220} />
      <h2 className="text-2xl font-semibold mt-6">欢迎来到团队</h2>
      <p className="text-muted-foreground text-sm mt-2">
        创建一个组织已便开始使用
      </p>
      <div className="mt-6">
        <Dialog>
          <DialogTrigger asChild>
            <Button size="lg">创建一个组织</Button>
          </DialogTrigger>
          <DialogContent className="p-0 bg-transparent border-none border-transparent max-w-[432px]">
            <DialogTitle>
              <DialogDescription></DialogDescription>
            </DialogTitle>
            <CreateOrganization />
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
};
